export default {
    tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
        formatter: function (params, ticket, callback) {
            const item = params[1];
            return `<div>
          <p style="margin-bottom: 2px;">${item.name}</p>
          <p  style="display: flex; align-items: center;"> 
            <span style="display: block; width: 8px; height: 8px; border-radius: 50%; background-color: ${item.color};"></span> 
            <span style="margin-left: 4px; font-weight: bold;">${item.value}</span>
          </p>
          </div>`;
        },
    },
    grid: {
        left: "3%",
        right: "2%",
        top: "18%",
        bottom: "2%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        axisLine: {
            lineStyle: {
                width: 2,
                color: "#fff",
            },
        },
        axisTick: {
            show: false,
        },
        data: [],
    },
    yAxis: {
        type: "value",
        name: "人",
        min: 15000,
        nameTextStyle: {
            padding: [0, 35, 0, 0],
            color: "#fff",
        },
        splitNumber: 4,
        axisLine: {
            show: true,
            lineStyle: {
                color: "#999",
                type: "dashed",
            },
        },
        splitLine: {
            lineStyle: {
                color: "#999",
                type: "dashed",
            },
        },
        axisLabel: {
            show: true,
            fontSize: 12,
            color: "#fff",
        },
    },
    series: [
        {
            name: "leftA",
            type: "bar",
            barWidth: 14,
            itemStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: "#07A0B3" },
                        { offset: 1, color: "rgba(14,185,151,0)" },
                    ],
                },
            },
            data: [],
        },
        {
            name: "rightA",
            tooltip: {
                show: false,
            },
            type: "bar",
            barWidth: 14,
            itemStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "#09DAF3" },
                            { offset: 1, color: "rgba(13,8,16,0)" },
                        ],
                    },
                },
            },
            data: [],
            barGap: 0,
        },
        {
            name: "topA",
            type: "pictorialBar",
            itemStyle: {
                normal: {
                    color: "#00f9d1",
                },
            },
            symbol: "diamond",
            symbolRotate: 0,
            symbolSize: ["28", "7"],
            symbolOffset: ["0", "-4"],
            symbolPosition: "end",
            data: [],
            z: 3,
        },
    ],
}